<template>
	<div class="goods">
		<!--        面包屑导航-->
		<div class="breadcrumb">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>全部商品</el-breadcrumb-item>
				<el-breadcrumb-item v-show="!search">分类</el-breadcrumb-item>
				<el-breadcrumb-item v-if="search">搜索</el-breadcrumb-item>
				<el-breadcrumb-item v-if="search">{{search}}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<!-- 导航 -->
		<div class="nav">
			<div class="product_nav">
				<div class="title">分类</div>
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane v-for="item in categoryList" :key="item.category_id" :label="item.category_name"
						:name="'' + item.category_id">
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>

		<!-- 主要内容 -->
		<div class="main">
			<div v-if="allProduct.length" class="list">
				<goods-list :goodsData="allProduct"></goods-list>
			</div>
			<div v-else class="list">
				<h6>抱歉没有找到相关的商品，请看看其他的商品</h6>
			</div>
			<!-- 分页 -->
			<div class="pagination">
				<el-pagination background layout="prev, pager, next" :page-size="queryInfo.pageSize"
					@current-change="currentChange" :total="total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import api from "../http/goods";

	export default {
		created() {
			//  获取所有分类
			this.getCategory();
			if (this.$globalData.$categoryArr.length) {
				this.queryInfo.categoryID = this.$globalData.$categoryArr
				console.log(this.$globalData.$categoryArr)
				this.$globalData.$categoryArr = [];
				this.activeName = "-1"
				this.getProduct()
			} else {
				let num = Number(this.activeName);
				this.activeName = num !== -1 ? this.activeName : "0"
			}
		},
		activated() {
			let search = this.$route.query.search
			if (search) {
				this.search = search;
				this.getProductBySearch();
				return;
			}

			if (this.$globalData.$categoryArr.length) {
				this.queryInfo.categoryID = this.$globalData.$categoryArr
				console.log(this.$globalData.$categoryArr)
				this.$globalData.$categoryArr = [];
				this.activeName = "-1"
				this.getProduct()
			} else {
				let num = Number(this.activeName);
				this.activeName = num !== -1 ? this.activeName : "0"
			}
		},
		data() {
			return {
				search:"",
				activeName: "", 
				categoryList: [], // 商品分类
				allProduct: [], //所有商品数据
				queryInfo: {
					categoryID: [], //分类id
					currentPage: 1, //当前页
					pageSize: 15, //每页显示多少条
				},
				total: 0, //总条数
			}
		},
		watch: {
			activeName(val) {
				if (val === "-1") return;
				// 初始化数据
				this.queryInfo.currentPage = 1;
				this.total = 0;
				this.search = "";

				// 切换分类获取相关分类的数据
				let categoryID = Number(val);
				this.queryInfo.categoryID = categoryID === 0 ? [] : [categoryID];
				this.getProduct();
			},
			$route(val) {
				if (val.query.search) {
					// 更新搜索条件
					this.search = val.query.search;
					// 数据初始化
					this.activeName = "-1";
					this.queryInfo.currentPage = 1;
					this.total = 0;
					// 重新获取
					this.getProductBySearch()
				}
			}
		},
		methods: {
			// 获取商品分类信息
			async getCategory() {
				let {
					data: res
				} = await api.getCategory();
				this.categoryList = res.category;
				this.categoryList.unshift({
					category_id: 0,
					category_name: "全部",
				});
			},
			// 获取所有商品数据
			async getProduct() {
				let apiName = this.queryInfo.categoryID.length ?
					"getProductByCategory" :
					"getAllProduct";
				let {
					data: res
				} = await api[apiName](this.queryInfo);
				this.allProduct = res.Product;
				this.total = res.total;
			},
			// 分页变化
			currentChange(currentPage) {
				this.queryInfo.currentPage = currentPage;
				if(this.search){
					this.getProductBySearch()
				}else{
					this.getProduct();
				}
			},
			// 通过搜索条件请求商品列表
			async getProductBySearch(){
				let sendData={
					currentPage:this.queryInfo.currentPage,
					pageSize:15,
					search:this.search
				}
				let {data:res} = await api.getProductBySearch(sendData);
				this.allProduct=res.Product;
				this.total=res.total
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods {
		background-color: #f5f5f5;

		.breadcrumb {
			margin: 0 auto;
			width: 1225px;
			height: 50px;
			background-color: #ffffff;
		}

		.nav {
			background-color: #ffffff;

			.product_nav {
				margin: 0 auto;
				width: 1225px;
				height: 40px;
				line-height: 40px;

				.title {
					float: left;
					width: 50px;
					font-size: 16px;
					font-weight: 700;
				}
			}
		}

		.main {
			margin: 0 auto;
			max-width: 1225px;

			.list {
				min-height: 650px;
				margin-top: 14.5px;
				margin-left: -13.7px;
				overflow: auto;
			}

			.pagination {
				height: 50px;
				text-align: center;
			}
		}
	}
</style>
